import { Button, Form, Input } from "antd";
import LeftImg from "./LeftImg";
import style from "./index.module.scss";
import finger from "@/assets/images/finger.png";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { login } from "@/api/login";
import { setJwt } from "@/utils/storage";
import { useNavigate } from "react-router-dom";
type FieldType = {
  userName: string;
  password: string;
};
export default function Login() { 
  const navigate = useNavigate();
  const onFinish = async (values: FieldType) => {
    const { userName, password } = values;
    try {
      const params = {
        userName,
        password,
      };
      const res = await login(params);
      if (res.code === 200) {
        const jwt = res.data?.token || "";
        setJwt(jwt);
        navigate("/", { replace: true });
      }
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <div className={`${style["login-page"]} lx-viewport__box`}>
      <div className={`flex flex--c ${style["login__wrap"]}`}>
        <div className={`${style["login__box"]} flex flex--c`}>
          <LeftImg />
          <div className={style["form-wrap"]}>
            <img className={style["finger-img"]} src={finger} alt="欢迎" />
            <div className={style["welcome-text"]}>欢迎回来!</div>
            <div className={style["welcome-desc"]}>记录快乐每一天</div>
            <Form
              name="login"
              size="middle"
              className={style['form-box']}
              onFinish={onFinish}
              autoComplete="off"
            >
              <Form.Item<FieldType>
                name="userName"
                rules={[{ required: true, message: "请输入用户名!" }]}
              >
                <Input prefix={<UserOutlined />} placeholder="用户名" />
              </Form.Item>

              <Form.Item<FieldType>
                name="password"
                rules={[{ required: true, message: "请输入密码!" }]}
              >
                <Input
                  prefix={<LockOutlined />}
                  type="password"
                  placeholder="密码"
                />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" style={{width:'100%'}}>
                  立即登陆
                </Button>
              </Form.Item>
              <Form.Item>
                <div className={style["find-pwd__btn"]}>已有账号,找回密码?</div>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
}
